import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../../actions/index'
import 'antd/dist/antd.css'
import { Drawer, Button } from 'antd'
import { DatePicker, Space } from 'antd';

const { RangePicker } = DatePicker

class Filter extends Component {

    state = {
        visible: false,
        flag: false,
        nickName: '',
        name: ''
    };

    showDrawer() {
        this.setState({
            visible: true,
            flag: !this.state.flag
        })
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    //点击关闭
    guanBtn() {
        this.setState({
            flag: !this.state.flag
        })
        this.props.get_List()
    }

    filterData(name, value) {
        this.setState({
            [name]: value
        })
    }

    //过滤
    filterBtn() {
        this.setState({
            visible: false
        })
        // let obj = {
        //     nickName: this.state.nickName,
        //     name: this.state.name
        // }

        this.props.filter_Btn(this.state.nickName)
    }

    render() {
        let { flag, nickName, name } = this.state
        return (
            <div className="site-drawer-render-in-current-wrapper">
                <div style={{ display: 'flex' }}>
                    <Button type="primary" onClick={this.showDrawer.bind(this)}>
                        过滤
                    </Button>
                    <span className={flag ? 'active2' : 'active'} onClick={
                        this.guanBtn.bind(this)
                    }>x</span>
                </div>
                <Drawer
                    title="过滤"
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    getContainer={false}
                    style={{ position: 'absolute' }}
                >
                    <p>成员昵称</p>
                    <input value={nickName} onChange={ e => {this.filterData('nickName', e.target.value)}} />
                    <p>真实姓名</p>
                    <input value={name} onChange={ e => {this.filterData('name', e.target.value)}} />
                    <p>邮箱</p>
                    <input />
                    <p>用户组</p>
                    <span><input type='checkbox' />公司管理员</span>
                    <span><input type='checkbox' />公司普通成员</span>
                    <Space direction="vertical" size={12}>
                        <RangePicker />
                    </Space>
                    <Button type={{ display: 'block', marginTop: '20px'}} onClick={
                        this.filterBtn.bind(this)
                    }>过滤</Button>
                </Drawer>
            </div>
        )
    }
}

let mapStateToProps = ({dataReducer}) => {
    return {
        ...dataReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)
 
export default connect(mapStateToProps, mapDispatchToProps)(Filter)